<div class="modal-header">
  <button type="button" class="close" ng-click="$dismiss()" aria-hidden="true" aria-label="Close">
    <span aria-hidden="true" class="fa fa-times"></span>
  </button>
  <div class="h3 modal-title">
    <translate>Upload File To: {$ ctrl.model.container.name $}</translate>
    <span ng-if="ctrl.model.folder">: {$ ctrl.model.folder $}</span>
  </div>
</div>

<div ng-form="ctrl.form">
  <div class="modal-body">
    <div class="row">
      <div class="col-sm-6">
        <fieldset>
          <div class="form-group ">
            <label class="control-label required" for="id_object_file" translate>File</label>
            <span class="hz-icon-required fa fa-asterisk"></span>
            <div>
              <input id="id_object_file" type="file" name="file" required
                     ng-model="ctrl.model.view_file" on-file-change="ctrl.changeFile">
            </div>
          </div>
          <div class="form-group required"
               ng-class="{'has-error': ctrl.form.name.$dirty && ctrl.form.name.$invalid}">
            <label class="control-label required" for="id_name" translate>File Name</label>
            <div>
              <input class="form-control" type="text" id="id_name" maxlength="255" name="name"
                     ng-model="ctrl.model.name" required object-name-exists />
              <span class="help-block text-info" ng-show="ctrl.form.name.$pending.exists" translate>
                Checking if this name is used...
              </span>
              <span class="help-block text-danger" ng-show="ctrl.form.name.$error.exists" translate>
                This name already exists.
              </span>
            </div>
          </div>
        </fieldset>
      </div>

      <div class="col-sm-6">
        <p translate>
          Note: Delimiters ('{$ ctrl.model.DELIMETER $}') are allowed in the
          file name to place the new file into a folder that will be created
          when the file is uploaded (to any depth of folders).
        </p>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="$dismiss()">
      <span class="fa fa-close"></span>
      <translate>Cancel</translate>
    </button>
    <button class="btn btn-primary" ng-click="$close(ctrl.model)"
           ng-disabled="ctrl.form.$invalid">
      <span class="fa fa-upload"></span>
      <translate>Upload File</translate>
    </button>
  </div>
</div>
